<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>carousel模块快速使用</title>
	<link rel="stylesheet" href="../libs/layui/css/layui.css">
	<!-- <link rel="stylesheet" href="../css/carousel.css"> -->
</head>

<body style="height: 100%; width: 100%; background-color: #DEE;">
	<div class="layui-tab-content" style="background-color: #DEE;">
		<div class="layui-row layui-col-space20">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-header">
						轮播组件
					</div>
					<div class="layui-carousel" id="test1">
						<div carousel-item>
							<div>条目1</div>
							<div>条目2</div>
							<div>条目3</div>
							<div>条目4</div>
							<div>条目5</div>
						</div>
					</div>
					<!-- 条目中可以是任意内容，如：<img src=""> -->
					<blockquote class="layui-elem-quote">
						在HTML结构中，只需要简单地注意这两项： <br> 1) 外层元素的 class="layui-carousel" 用来标识为一个轮播容器 <br> 2) 内层元素的属性 carousel-item 用来标识条目<br>
						<br> 而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。<br>
					</blockquote>
					<p>参数说明</p>
					<table class="layui-table">
						<colgroup>
							<col width="120">
							<col>
							<col width="150">
							<col width="200">
						</colgroup>
						<thead>
							<tr>
								<th>可选项</th>
								<th>说明</th>
								<th>类型</th>
								<th>默认值</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>elem</td>
								<td>指向容器选择器，如：elem: '#id'。也可以是DOM对象</td>
								<td>string/object</td>
								<td>无</td>
							</tr>
							<tr>
								<td>width</td>
								<td>设定轮播容器宽度，支持像素和百分比</td>
								<td>string</td>
								<td>'600px'</td>
							</tr>
							<tr>
								<td>height</td>
								<td>设定轮播容器高度，支持像素和百分比</td>
								<td>string</td>
								<td>'280px'</td>
							</tr>
							<tr>
								<td>full</td>
								<td>是否全屏轮播</td>
								<td>boolean</td>
								<td>false</td>
							</tr>
							<tr>
								<td>anim</td>
								<td class="layui-text">
									轮播切换动画方式，可选值为：
									<ul>
										<li>default（左右切换）</li>
										<li>updown（上下切换）</li>
										<li>fade（渐隐渐显切换）</li>
									</ul>
								</td>
								<td>string</td>
								<td>'default'</td>
							</tr>
							<tr>
								<td>autoplay</td>
								<td>是否自动切换</td>
								<td>boolean</td>
								<td>true</td>
							</tr>
							<tr>
								<td>interval</td>
								<td>自动切换的时间间隔，单位：ms（毫秒），不能低于800</td>
								<td>number</td>
								<td>3000</td>
							</tr>
							<tr>
								<td>index</td>
								<td>初始开始的条目索引</td>
								<td>number</td>
								<td>0</td>
							</tr>
							<tr>
								<td>arrow</td>
								<td class="layui-text">
									切换箭头默认显示状态，可选值为：
									<ul>
										<li>hover（悬停显示）</li>
										<li>always（始终显示）</li>
										<li>none（始终不显示）</li>
									</ul>
								</td>
								<td>string</td>
								<td>'hover'</td>
							</tr>
							<tr>
								<td>indicator</td>
								<td class="layui-text">
									指示器位置，可选值为：
									<ul>
										<li>inside（容器内部）</li>
										<li>outside（容器外部）</li>
										<li>none（不显示）</li>
									</ul>
									<br>注意：如果设定了 <em>anim:'updown'</em>，该参数将无效
								</td>
								<td>string</td>
								<td>'inside'</td>
							</tr>
							<tr>
								<td>trigger</td>
								<td class="layui-text">
									指示器的触发事件
								</td>
								<td>string</td>
								<td>'click'</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script src="../libs/layui/layui.js"></script>
	<script src="../js/carousel.js"></script>
</body>

</html>
